<template>
  <div class="search-outer">
    <div class="search">
      <div class="breadcrumbs">
        <div class="container">
          <a href="javascript:;">首页</a>
          <span class="sep">></span>
          <a href="javascript:;">全部结果</a>
        </div>
      </div>
      <div class="search-filter">
        <div class="filter-wrap">
          <div class="filter-list">
            <span class="label">分类：</span>
            <ul
              class="item"
              @click="changeCategory"
              v-if="searchStore.categoryTwo"
              :style="item">
              <!-- 商品分类 -->
              <li>
                <a
                  :style="{ color: categoryId === 0 ? '#ff6900' : '' }"
                  href="javascript:;"
                  :data-id="0">
                  全部
                </a>
              </li>
              <li
                v-for="category of searchStore.categoryTwo"
                :key="category.categoryTwo_id">
                <a
                  :style="{
                    color:
                      categoryId === category.categoryTwo_id ? '#ff6900' : ''
                  }"
                  href="javascript:;"
                  :data-id="category.categoryTwo_id">
                  {{ category.categoryTwo_name }}
                </a>
              </li>
              <span
                v-if="searchStore.categoryTwo.length > 7"
                class="more-btn"
                @click="changeCategoryShow">
                更多
                <img
                  :style="arrow"
                  :src="require('@/asset/img/arrow-right-#333.png')"
                  alt="" />
              </span>
            </ul>
          </div>
        </div>
      </div>
      <div class="search-result">
        <div class="reuslt-order">
          <div class="order-list-box clearfix">
            <ul
              class="order-list"
              @click="changeKey">
              <li
                class="order-item"
                style="border-left: none">
                <a
                  href="javascript:;"
                  :style="{ color: key === 0 ? '#ff6900' : '' }"
                  :data-key="0">
                  综合
                </a>
              </li>
              <li class="order-item">
                <a
                  href="javascript:;"
                  :style="{ color: key === 1 ? '#ff6900' : '' }"
                  :data-key="1">
                  新品
                </a>
              </li>
              <li class="order-item">
                <a
                  href="javascript:;"
                  :style="{ color: key === 2 ? '#ff6900' : '' }"
                  :data-key="2">
                  畅销
                </a>
              </li>
              <li class="order-item">
                <a
                  href="javascript:;"
                  @click="changeIsPriceDown"
                  :style="{ color: key === 3 ? '#ff6900' : '' }"
                  :data-key="3">
                  价格
                  <i
                    :class="`fa ${
                      isPriceDown ? 'fa-long-arrow-down' : 'fa-long-arrow-up'
                    }`"></i>
                </a>
              </li>
            </ul>
            <ul class="type-list">
              <li>
                <div
                  class="address-choose"
                  @mouseenter="showAddress(true)"
                  @mouseleave="showAddress(false)">
                  <span class="label">收货地</span>
                  <a href="javascript:;">
                    <span class="address-info">
                      {{
                        `${addressStore.addressArr.province} ${addressStore.addressArr.city}`
                      }}
                    </span>
                  </a>
                  <Address ref="address"></Address>
                </div>
              </li>
              <li>
                <a href="javascript:;">
                  <Checkbox
                    ref="isPromo"
                    @click.native="getGoodsList"></Checkbox>
                  促销
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <Checkbox ref="checkbox"></Checkbox>
                  分期
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <Checkbox
                    ref="isStock"
                    @click.native="getGoodsList"></Checkbox>
                  查看有货
                </a>
              </li>
            </ul>
          </div>
          <div
            class="goods-list-box"
            v-if="searchStore.goodsList">
            <div class="goods-list clearfix">
              <Item
                v-for="goods of searchStore.goodsList"
                :key="goods.msg.goodsInfo[0].goods_id"
                :type="goods.type"
                :msg="goods.msg"></Item>
            </div>
            <Pagination></Pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import useStore from '@/store'
import Item from '@/components/item/index.vue'
import Checkbox from '@/components/checkbox/index.vue'
import Address from '@/components/address/index.vue'
import Pagination from '@/components/pagination/index.vue'
const route = useRoute()
const { addressStore, searchStore } = useStore()
const address = ref<InstanceType<typeof Address>>()
const showAddress = (flag: boolean) => {
  address.value!.changeIsShow(flag)
}

// 切换分类显示
const showCategory = ref<boolean>(false)
const item = computed(() => {
  return { height: showCategory.value ? '' : '48px' }
})
const arrow = computed(() => {
  return { transform: showCategory.value ? 'rotate(-90deg)' : 'rotate(90deg)' }
})
const changeCategoryShow = () => {
  showCategory.value = !showCategory.value
}

// 改变详细条件
const keyword = ref<string>(route.query.keyword as string)
watch(
  () => route.query.keyword,
  (newValue, oldValue) => {
    if (typeof newValue == 'string') {
      keyword.value = newValue
      getCategoryTwo()
      getGoodsList()
    }
  }
)
const page = ref<number>(searchStore.pagination.currentPage)

const categoryId = ref<number>(0)
const changeCategory = (e: MouseEvent) => {
  if ((e.target as HTMLElement).nodeName.toLowerCase() === 'a') {
    categoryId.value = Number((e.target as HTMLElement).dataset.id)
    getGoodsList()
  }
}
const key = ref<number>(0)
const changeKey = (e: MouseEvent) => {
  if ((e.target as HTMLElement).nodeName.toLowerCase() === 'a') {
    key.value = Number((e.target as HTMLElement).dataset.key)
    getGoodsList()
  }
}
const isPriceDown = ref<boolean>(false)
const changeIsPriceDown = () => {
  if (key.value === 3) {
    isPriceDown.value = !isPriceDown.value
  }
}
const isPromo = ref<InstanceType<typeof Checkbox>>()
const isStock = ref<InstanceType<typeof Checkbox>>()
const getGoodsList = () => {
  searchStore.getGoodsList(
    page.value,
    keyword.value!,
    key.value,
    categoryId.value!,
    isPromo.value!.checked as boolean,
    isStock.value!.checked as boolean,
    isPriceDown.value
  )
}
const getCategoryTwo = () => {
  searchStore.getCategoryTwo(keyword.value)
}
onMounted(() => {
  getCategoryTwo()
  getGoodsList()
})
</script>

<style lang="less" scoped>
.search-outer {
  background-color: #f5f5f5;
  .search {
    .breadcrumbs {
      height: 40px;
      font-size: 12px;
      line-height: 40px;
      background: #f5f5f5;
      color: #757575;
      .container {
        width: 1226px;
        margin-right: auto;
        margin-left: auto;
        a {
          cursor: pointer;
          color: #757575;
        }
        .sep {
          margin: 0 0.5em;
          color: #b0b0b0;
        }
      }
    }
    .search-filter {
      background: #fff;
      .filter-wrap {
        margin: auto;
        width: 1226px;
        padding: 18px 0;
        .filter-list {
          position: relative;
          .label {
            top: 0;
            left: 0;
            color: #b0b0b0;
            position: absolute;
            height: 20px;
            line-height: 20px;
            padding: 14px 0;
            font-size: 14px;
          }
          .item {
            // height: 48px;
            position: relative;
            overflow: hidden;
            padding: 0 60px 0 124px;
            margin: 0;
            list-style: none;
            font-size: 0;

            li {
              display: inline-block;
              text-overflow: ellipsis;
              overflow: hidden;
              color: #424242;
              font-size: 14px;
              width: 148px;
              padding: 14px 0;
              height: 20px;
              line-height: 20px;
            }
            .more-btn {
              position: absolute;
              height: 20px;
              line-height: 20px;
              padding: 14px 0;
              font-size: 14px;
              cursor: pointer;
              color: #757575;
              right: 0;
              top: 0;
              img {
                vertical-align: -3px;
              }
            }
          }
        }
      }
    }
    .search-result {
      padding: 20px 0 100px;
      .reuslt-order {
        position: relative;
        margin: 0 auto;
        width: 1226px;
        .order-list-box {
          position: relative;
          height: 30px;
          margin: 20px 0;
          .order-list {
            display: block;
            float: left;
            height: 30px;
            line-height: 30px;
            padding: 0;
            margin: 0;
            list-style-type: none;
            .order-item {
              // border-left: none;
              float: left;
              padding: 0 30px;
              border-left: 1px solid #e0e0e0;
              line-height: 20px;
            }
          }
          .type-list {
            display: block;
            float: right;
            height: 30px;
            line-height: 30px;
            li {
              float: left;
              margin-left: 30px;
              .address-choose {
                color: #424242;
                .label {
                  display: inline-block;
                  margin-right: 8px;
                  height: 30px;
                }
                a {
                  .address-info {
                    position: relative;
                    display: inline-block;
                    background: #fff;
                    border: 1px solid #e3e3e3;
                    height: 14px;
                    line-height: 14px;
                    padding: 7px 14px;
                    cursor: pointer;
                  }
                }
              }
            }
          }
        }
        .goods-list-box {
          .goods-list {
            width: 1240px;
            margin: 0;
          }
        }
      }
    }
  }
}
</style>
